<template>
	<article class="page page-text2audio">
		<h4 class="text-center">文本转语音（Azure）</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-4 left">
					<fieldset>
						<legend>基础设置</legend>
						<div class="fieldset-content">
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">存储</div>
								<div class="row-flex-main"><input class="form-control" type="text" v-model="toPath" /></div>
								<div class="row-flex-suffix"><x-button @click="setToPath">选择...</x-button></div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">语言</div>
								<div class="row-flex-main">
									<select class="form-control" v-model="formData.language" @change="languageChange">
										<option v-for="(v,i) in languageList" :key="i" :value="v.value">{{v.label}}</option>
									</select>
								</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">语音</div>
								<div class="row-flex-main">
									<select class="form-control" v-model="formData.voice">
										<option v-for="(v,i) in voiceActiveList" :key="i" :value="v.value">{{v.label}}</option>
									</select>
								</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">风格</div>
								<div class="row-flex-main">
									<select class="form-control" v-model="formData.style">
										<option v-for="(v,i) in styleList" :key="i" :value="v.value">{{v.label}}</option>
									</select>
								</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">角色</div>
								<div class="row-flex-main">
									<select class="form-control" v-model="formData.role">
										<option v-for="(v,i) in roleList" :key="i" :value="v.value">{{v.label}}</option>
									</select>
								</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">语速</div>
								<div class="row-flex-main">
									<input type="range" class="custom-range" :min="-100" :max="100" step="1" v-model="formData.rate" />
								</div>
								<div class="row-flex-suffix">{{formData.rate}}%</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">音调</div>
								<div class="row-flex-main">
									<input type="range" class="custom-range" :min="-100" :max="100" step="1" v-model="formData.pitch" />
								</div>
								<div class="row-flex-suffix">{{formData.pitch}}%</div>
							</div>
							<div class="form-group form-group-main"></div>
							<div class="form-group">
								<x-button type="primary" block @click="listenTTS">试 听</x-button>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-8 right">
					<fieldset>
						<legend>文本内容</legend>
						<div class="fieldset-content">
							<div class="form-group form-group-main">
								<textarea class="form-control" v-model="formData.content" placeholder="请输入文本内容"></textarea>
							</div>
							<div class="form-group">
								<x-button type="primary" block @click="downloadTTS">转换&保存</x-button>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
const path = global.require('path')
const {remote} = global.require('electron')
const {dialog} = remote
const selfWindow= remote.getCurrentWindow()
let mstts = global.mstts || null

export default {
	name: 'text2audio',
	data () {
		return {
			toPath: this.$sharedObject('desktopPath'),
			formData: {
				language: 'CN',
				voice: 'Yunxi',
				style: 'general',
				role: 'general',
				rate: 0,
				pitch: 0,
				content: '',
			},
			// 语言列表
			languageList: [
				{label: '中文普通话', value: 'CN'},
				{label: '中国台湾-国语', value: 'TW'},
				{label: '中国香港-粤语', value: 'HK'},
			],
			// 语音列表
			voiceList: {
				CN: [
					{label: '晓晓', value: 'Xiaoxiao'},
					{label: '晓辰', value: 'Xiaochen'},
					{label: '晓涵', value: 'Xiaohan'},
					{label: '晓墨', value: 'Xiaomo'},
					{label: '晓秋', value: 'Xiaoqiu'},
					{label: '晓睿', value: 'Xiaorui'},
					{label: '晓双', value: 'Xiaoshuang'},
					{label: '晓萱', value: 'Xiaoxuan'},
					{label: '晓颜', value: 'Xiaoyan'},
					{label: '晓悠', value: 'Xiaoyou'},
					{label: '云扬', value: 'Yunyang'},
					{label: '云希', value: 'Yunxi'},
					{label: '云野', value: 'Yunye'},
					{label: '辽宁晓北', value: 'LN-Xiaobei'},
					{label: '四川云希', value: 'SC-Yunxi'},
					{label: '云皓', value: 'Yunhao'},
					{label: '云健', value: 'Yunjian'},
				],
				TW: [
					{label: '曉臻', value: 'HsiaoChen'},
					{label: '曉雨', value: 'HsiaoYu'},
					{label: '雲哲', value: 'YunJhe'},
				],
				HK: [
					{label: '曉曼', value: 'HiuMaan'},
					{label: '曉佳', value: 'HiuGaai'},
					{label: '雲龍', value: 'WanLung'},
				]
			},
			// 风格列表
			styleList: [
				{label: '一般', value: 'general'},
			],
			// 角色列表
			roleList: [
				{label: '一般', value: 'general'},
			],
			loadingCount: 0
		}
	},
	computed: {
		voiceActiveList () {
			return this.voiceList[this.formData.language] || []
		},
	},
	mounted () {
		mstts = this.$sharedObject('mstts')
	},
	methods: {
		// 设置保存位置
		setToPath () {
			let filePaths = dialog.showOpenDialogSync(selfWindow, {
				title: '选择目录',
				buttonLabel:'确定',
				defaultPath: this.$sharedObject('desktopPath'),
				properties: ['openDirectory']
			})
			console.log(filePaths)
			if (filePaths instanceof Array && filePaths.length > 0) {
				this.toPath = filePaths[0]
			}
		},
		// 语言变更
		languageChange () {
			this.$set(this.formData, 'voice', '')
		},
		// 试听
		listenTTS () {
			if (!mstts) return
			if (!this.formData.voice) {
				return this.$toast('请选择语音后再试')
			}
			let voice = `${this.formData.language}-${this.formData.voice}`
			let content = this.formData.content || '欢迎使用半吊子伯爵工具箱'
			mstts.getTTSData(content, voice).then(mp3buffer => {
				if (!mp3buffer) {
					return this.$toast('文本转换语音失败')
				}
			}).catch(err => {
				this.$toast('文本转换语音失败:' + err)
				console.log('文本转换语音失败:', err)
			})
		},
		// 下载
		downloadTTS () {
			if (!mstts) return
			if (!this.formData.content) {
				return this.$toast('请输入要转换的文本')
			}
			if (!this.formData.voice) {
				return this.$toast('请选择语音后再试')
			}
			let voice = `${this.formData.language}-${this.formData.voice}`
			let filePath = path.join(this.toPath, `${Date.now()}.mp3`)
			mstts.getTTSData(this.formData.content, voice).then(mp3buffer => {
				if (!mp3buffer) {
					return this.$toast('文本转换语音失败')
				}
				this.$sharedObject('jstoolsNode').writeFile(filePath, mp3buffer).then(() => {
					this.$toast('转换成功')
				}).catch(err => {
					this.$toast('保存文件失败:' + err)
				})
			}).catch(err => {
				this.$toast('文本转换语音失败:' + err)
				console.log('文本转换语音失败:', err)
			})
		}
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-text2audio {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			display: flex;
			flex-direction: column;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.form-group-main {
			height: 0;
			flex-grow: 1;
		}
		.left {
			.row-flex {
				.row-flex-prefix {width: 2.5em;}
				.row-flex-suffix {min-width: 3em;}
				& + .row-flex {
					margin-top: .5em;
				}
			}
			.custom-range {width: 100%;}
		}
		.right {
			.form-group-main {
				height: 0;
				flex-grow: 1;
				textarea {
					display: block;
					width: 100%;
					height: 100%;
					background-color: #fff;
					resize: none;
				}
			}
		}
	}
}
</style>
